import React, { useEffect } from 'react';
import styles from './index.less';
import useModel from './hooks/useModel';
import useCanvas from './hooks/useCanvas';

const TankGame: React.FC = () => {
  // 模型
  useModel();
  // 游戏背景
  const [{ el, canvas }] = useCanvas('#game-container', 'baseBackground');
  useEffect(() => {
    canvas.fillStyle = '#343434';
    canvas.fillRect(0, 0, el.width, el.height);
  }, []);

  return <div className={styles['game-wrapper']} id="game-container" />;
};

export default TankGame;
